<template>

  <div class="main-container">
    <div class="user-cover-container">
      <img class="user-cover-img" :src="'/api/getSelfCover'" alt="封面">
    </div>

    <div style="width: 100vw;display: flex;justify-content: center;position: sticky;bottom: 0;background-color: white;">
      <div class="flex-container">
        <div style="display: flex;flex-direction: row;">
          <div class="user-info-img-container" style="margin-top: -24px;">
            <img class="user-info-img" :src="'/api/getSelfImage'" alt="头像">
          </div>
          <div class="user-info-content-container">
            <div style="display: flex;">
              <span style="display: flex;flex-grow: 1;font-size: 20px;font-weight: bold;cursor: default!important;">{{ userInfo.nickname }}</span>
            </div>
            <div>
            <span style="font-size: 12px;">
              <span style="font-weight: bold;padding-right: 6px;">0</span>
              <span style="color: #858585">已关注</span>
            </span>
              <span style="font-size: 12px;padding-left: 12px;">
              <span style="font-weight: bold;padding-right: 6px;">0</span>
              <span style="color: #858585">粉丝</span>
            </span>
            </div>
          </div>
          <div style="padding-top: 24px;">
            <el-button class="el-info-button" @click="()=>{showEditInfoDialog=true;}">编辑个人资料</el-button>
          </div>
        </div>

        <div style="display: flex;flex-direction: row-reverse;">
          <div style="min-width: calc(100% - 108px)">
            <p style="font-size: 14px;color: #858585;font-weight: 500;margin-bottom: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
              {{ userInfo.intro }}
            </p>
            <p style="font-size: 14px;cursor: pointer;color: #858585;font-weight: 500;">查看个人资料</p>
          </div>
        </div>
      </div>
    </div>

    <div class="flex-container">
      <el-tabs v-model="activeName" class="user-table" @tab-click="clickTab">
        <el-tab-pane label="主页" name="first">
          <div class="app-container">
            <AppBox content="扫雷" url="/game/saolei">
              <SwitchFilled />
            </AppBox>
            <AppBox content="排行榜" url="/game/saolei/board">
              <SwitchFilled />
            </AppBox>
            <AppBox v-if="userInfo.role===3" content="邀请码" url="/inviteCode">
              <SwitchFilled />
            </AppBox>
          </div>
        </el-tab-pane>
        <el-tab-pane label="动态" name="second">
          <el-empty description="敬请期待" />
        </el-tab-pane>
        <el-tab-pane label="设置" name="third">
          <el-empty description="敬请期待" />
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>

  <EditInfoDialog
      :after="async ()=>{await getInfo();}"
      :info="userInfo"
      v-model="showEditInfoDialog"
  />

</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import AppBox from "../components/misc/AppBox.vue";
import {SwitchFilled} from "@element-plus/icons-vue";
import EditInfoDialog from "../components/dialog/EditInfoDialog.vue";
import {getLoginInfoRequest} from "../api/login.ts";
import {useRouter} from "vue-router";

const router = useRouter();

const activeName = ref("first")

const showEditInfoDialog = ref(false);

const userInfo = ref({
  intro: "",
  nickname: "",
  gender: 0,
  role: 0
});

const clickTab = async () => {

}

const getInfo = async () => {
  const response = await getLoginInfoRequest();
  if (response.code===-1){
    await router.push("/login");
  }
  userInfo.value = response.data;
}

onMounted(async ()=>{
  await getInfo();
})

</script>

<style>
.user-table>.el-tabs__header{
  height: 80px;

  border-bottom: 1px rgba(208, 208, 208, 0.5) solid;
}

.user-table>.el-tabs__header>.el-tabs__nav-wrap{
  height: 80px;
}
.user-table>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll{
  position: relative;
  top: -24px;
  height: 80px;
}
.user-table>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav{
  position: relative;
  left: -24px;
}

.user-table>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__active-bar{
  height: 4px!important;
  width: calc(100% / 3)!important;
}

.user-table>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item{
  font-weight: bold;
  font-size: 16px!important;
  padding: 0 24px;
  position: relative;
  transform: translateX(24px);
  top: 42px;
  color: #858585;
}

.user-table>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item:hover{
  transition: 0.7s;
  color: #1F1F1F;
}

.user-table>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.is-active{
  color: #1F1F1F;
}

.user-table>.el-tabs__header>.el-tabs__nav-wrap::after{
  display: none!important;
}

</style>

<style scoped>

.main-container{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
}

.user-cover-container{
  overflow: hidden;
  display: flex;
}

.user-cover-img{
  height: 50vw;
  min-height: 35vh;
  width: 100vw;
  object-fit: cover;
}

.flex-container{
  min-width: 338px;
  max-width: 900px;
  width: calc(100vw - 24px);
  padding-bottom: 24px;
}

.user-info-content-container{
  padding-top: 24px;
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.user-info-content-container>div{
  margin-bottom: 10px;
}

.user-info-content-container>div>span{
  margin-bottom: 10px;
  cursor: pointer;
}

.app-container{
  min-height: 300px;
  display: flex;
  flex-wrap: wrap;
}
.app-container>div{
  margin-right: 12px;
}

</style>